<template>
  <view class="container">
    <!--   内容区域   -->
    <view class="container-body">
      <!--   预约信息区域   -->
      <view class="container-body__content">
        <view class="container-body__content-title">
          <text>预约信息</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>维修项目:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ maintenanceItems }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>预约时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.appointmentTime }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>报修地址:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.premisesAddress }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>备注信息:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderRemark }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>报修人:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.contactsName }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>手机号:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.contactsPhone }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>紧急程度:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ urgencyDegreeMapping(orderInfo.urgencyDegree) }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>故障照片:</text>
            </view>
            <view class="container-body__content-info-item__photo">
              <!--   图片展示区域:点击预览大图  -->
              <view class="container-body__content-info-item__photo-item" v-for="(item, index) in faultPicture"
                    :key="index">
                <image :src="item" mode="aspectFit"
                       style="width: 100rpx; height: 100rpx;border: 1px solid #eee;" @click.stop="showPhoto(index)"/>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--   工单信息区域   -->
      <view class="container-body__content">
        <view class="container-body__content-title">
          <text>工单信息</text>
        </view>
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>工单编号:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.workOrderId }}</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label">
              <text>申请时间:</text>
            </view>
            <view class="container-body__content-info-item-value">
              <text>{{ orderInfo.createTime }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--   原因区域   -->
      <view class="container-body__content">
        <view class="container-body__content-info">
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-label" style="flex: 1;width: 100%;">
              <text style="color: red;font-size: 28rpx;margin-bottom: 20rpx;">*</text>
              <text>请填写取消原因</text>
            </view>
          </view>
          <view class="container-body__content-info-item">
            <view class="container-body__content-info-item-value" style="flex: 1;width: 100%;">
              <u-textarea v-model="form.recordContent" placeholder="请输入内容"></u-textarea>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--   底部区域   -->
    <view class="container-footer">
      <!--     状态：待派单、待接单、已接单      -->
      <template v-if="['1', '2', '3'].includes(orderInfo.workOrderState)">
        <view class="btn">
          <u-button type="default" @click="cancel" plain>取消</u-button>
        </view>
        <view class="btn">
          <u-button type="primary" @click="submit">提交</u-button>
        </view>
      </template>
      <!--     状态：已取消      -->
      <template v-else-if="['7'].includes(orderInfo.workOrderState)">
        <view class="btn">
          <u-button type="default" plain disabled>已取消</u-button>
        </view>
      </template>

    </view>
  </view>
</template>

<script>
import {maintenanceTypeMapping, stateMapping, urgencyDegreeMapping} from "@/pages/manager/workOrder/maintenance/commonData";
import {cancelAppointment, getWorkOrderDetail} from "@/api/manager/workOrder";

export default {
  data() {
    return {
      orderInfo: {},
      // 原因
      reason: '',
      form: {
        recordContent: "", //记录内容
        workOrderId: "" //工单编号
      }
    };
  },
  computed: {
    //维修类型
    maintenanceTypeMapping() {
      return (value) => {
        let obj = maintenanceTypeMapping.find(item => item.value === value);
        return obj ? obj.label : '';
      }
    },
    //紧急程度
    urgencyDegreeMapping() {
      return (value) => {
        let obj = urgencyDegreeMapping.find(item => item.value === value);
        return obj ? obj.label : '';
      }
    },
    // 维修项目
    maintenanceItems() {
      let list = this.orderInfo.workOrderChargeItemList?this.orderInfo.workOrderChargeItemList.map(item => item.itemName):[]
      return list.join(' | ')
    },
    //故障图片
    faultPicture() {
      return this.orderInfo.faultPicture ? this.orderInfo.faultPicture.split(',') : []
    },
  },
  onLoad(options) {
    console.log('detail options:', options);
    this.orderInfo = JSON.parse(options.data);
    this.form.workOrderId = this.orderInfo.workOrderId;
    this.init();
  },
  methods: {
    init(){
      // 获取工单详情
      this.getWorkOrderDetail();
    },
    // 获取工单详情
    getWorkOrderDetail() {
      getWorkOrderDetail(this.orderInfo.workOrderId).then(res => {
        if(res.code === 200){
          this.orderInfo = res.data;
        }
      })
    },
    // 展示图片
    showPhoto(index) {
      console.log('index:', index)
      console.log('showPhoto');
      // 预览大图
      uni.previewImage({
        current: index,
        urls: [
          'https://cdn.uviewui.com/uview/album/1.jpg',
          'https://cdn.uviewui.com/uview/swiper/1.jpg'
        ]
      })
    },
    // 取消
    cancel() {
      // 判断当前页面是否有上一页
      let pages = getCurrentPages()
      if (pages.length > 1) {
        // 页面栈中有上一页，则返回上一页
        this.$tab.navigateBack()
      } else {
        this.$tab.redirectTo('./list')
      }
    },
    // 提交
    submit() {
      if (!this.form.recordContent) {
        uni.showToast({
          title: '请填写取消原因',
          icon: 'none'
        })
        return
      }
      // 二次确认
      uni.showModal({
        title: '确认取消',
        content: '确定取消预约？',
        success: (res) => {
          if (res.confirm) {
            console.log('取消工单');
            cancelAppointment(this.form).then(res => {
              uni.showToast({
                title: res.msg || '取消成功',
                icon: 'none'
              })
              // 刷新页面
              this.getWorkOrderDetail();
              setTimeout(() => {
                // 跳转
                this.cancel();
              }, 1000)
            })

          } else if (res.cancel) {
            console.log('取消操作')
          }
        }
      })
    },
  },
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;

  .container-body {
    margin-bottom: 160rpx;

    &__content {
      margin-top: 20rpx;
      background-color: #fff;
      padding: 20rpx;

      &-title {
        padding: 20rpx 0;
        font-size: 32rpx;
        margin-bottom: 20rpx;
        font-weight: bold;
        border-bottom: 1px solid #EBEBEB;
      }

      &-info {

        &-item {
          margin-bottom: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &-label {
            font-size: 28rpx;
            color: #2B2B2B;
            width: 160rpx;
          }

          &-value {
            font-size: 28rpx;
            color: #2B2B2B;
            margin-left: 20rpx;
          }

          &__photo {
            //display: flex;
            //justify-content: space-between;
            //flew-wrap: wrap;
            //margin-top: 10rpx;
            display: grid;
            grid-template-columns:repeat(auto-fit,100rpx);
            grid-gap: 10rpx; //元素之间的距离 相当于margin的效果
            max-width: 500rpx;
          }
        }

        .container-body__content-info__footer {
          &-text {
            font-size: 28rpx;
            text-align: right;
            margin-bottom: 20rpx;
          }
        }
      }
    }
  }

  .container-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 30rpx 20rpx;
    display: flex;
    justify-content: space-between;

    .btn {
      width: 100%;
      border-radius: 10rpx;
      border: 1rpx solid #ccc;

      &:last-child {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
